<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GM工具 - 主页</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        /* 主页面特定样式 */
        body {
            display: block;
            height: auto;
            min-height: 100vh;
        }
        
        .main-container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        .header {
            background-color: #2c3e50;
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .header h1 {
            margin: 0;
            font-size: 24px;
        }
        
        .user-info {
            font-size: 14px;
            display: flex;
            align-items: center;
        }
        
        .logout-button {
            background-color: #e74c3c;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 10px;
            transition: background-color 0.3s ease;
        }
        
        .logout-button:hover {
            background-color: #c0392b;
        }
        
        .content {
            padding: 30px 20px;
            max-width: 1200px;
            margin: 0 auto;
            flex: 1;
        }
        
        .dashboard-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
            justify-items: center;
        }
        
        .card {
            background-color: white;
            border-radius: 8px;
            padding: 25px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            border-top: 4px solid #3498db;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }
        
        .card h3 {
            margin-top: 0;
            color: #2c3e50;
            border-bottom: 1px solid #eee;
            padding-bottom: 12px;
            margin-bottom: 15px;
        }
        
        .card-content {
            padding: 10px 0;
        }
        
        .action-button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 15px;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .action-button:hover {
            background-color: #2980b9;
            transform: translateY(-2px);
        }
        
        .footer {
            text-align: center;
            padding: 20px;
            background-color: #ecf0f1;
            color: #7f8c8d;
            margin-top: auto;
            border-top: 1px solid #ddd;
        }
        
        /* 不同卡片主题色 */
        .card.player {
            border-top-color: #e74c3c;
        }
        
        .card.player .action-button {
            background-color: #e74c3c;
        }
        
        .card.player .action-button:hover {
            background-color: #c0392b;
        }
        
        .card.config {
            border-top-color: #f39c12;
        }
        
        .card.config .action-button {
            background-color: #f39c12;
        }
        
        .card.config .action-button:hover {
            background-color: #e67e22;
        }
        
        .card.stats {
            border-top-color: #27ae60;
        }
        
        .card.stats .action-button {
            background-color: #27ae60;
        }
        
        .card.stats .action-button:hover {
            background-color: #229954;
        }
        
        .card.logs {
            border-top-color: #9b59b6;
        }
        
        .card.logs .action-button {
            background-color: #9b59b6;
        }
        
        .card.logs .action-button:hover {
            background-color: #8e44ad;
        }
        
        /* 响应式设计 */
        @media (max-width: 576px) {
            .dashboard-cards {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .header h1 {
                font-size: 18px;
            }
        }
        
        @media (min-width: 577px) and (max-width: 768px) {
            .dashboard-cards {
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;
            }
        }
        
        @media (min-width: 769px) and (max-width: 1024px) {
            .dashboard-cards {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (min-width: 1025px) {
            .dashboard-cards {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        
        /* 卡片尺寸统一 */
        .card {
            width: 100%;
            max-width: 300px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="main-container">
        <div class="header">
            <h1>GM工具管理系统</h1>
            <div class="user-info">
                <span id="welcomeMessage">欢迎，管理员</span>
                <button class="logout-button" onclick="logout()">退出登录</button>
            </div>
        </div>
    
    <div class="content">
        <h2>控制面板</h2>
        
        <div class="dashboard-cards">
            <div class="card player">
                <h3>玩家管理</h3>
                <div class="card-content">
                    <p>查看和管理游戏玩家信息</p>
                    <button class="action-button" onclick="openPlayerManagement()">管理玩家</button>
                </div>
            </div>
            
            <div class="card config">
                <h3>游戏配置</h3>
                <div class="card-content">
                    <p>修改游戏参数和配置</p>
                    <button class="action-button" onclick="openGameConfig()">配置游戏</button>
                </div>
            </div>
            
            <div class="card stats">
                <h3>数据统计</h3>
                <div class="card-content">
                    <p>查看游戏运营数据</p>
                    <button class="action-button" onclick="openStatistics()">查看统计</button>
                </div>
            </div>
            
            <div class="card logs">
                <h3>系统日志</h3>
                <div class="card-content">
                    <p>查看系统运行日志</p>
                    <button class="action-button" onclick="openSystemLogs()">查看日志</button>
                </div>
            </div>
        </div>
    </div>
    
    <div class="footer">
        <p>GM工具 v1.0.0 | 游戏管理系统</p>
    </div>
    </div>

    <script src="js/utils.js"></script>
    <script>
        // 页面加载时检查登录状态
        window.onload = function() {
            // 检查是否已登录
            if (!sessionStorage.getItem('gmToken')) {
                window.location.href = '/gm/login.html';
                return;
            }
            
            // 显示欢迎信息
            const username = sessionStorage.getItem('gmUsername');
            if (username) {
                document.getElementById('welcomeMessage').textContent = `欢迎，${username}`;
            }
            
            // 设置定期检查会话状态
            setInterval(checkSessionStatus, 60000); // 每分钟检查一次
        };
        
        function checkSessionStatus() {
            // 简单检查token是否存在
            if (!sessionStorage.getItem('gmToken')) {
                showMessage('登录已过期，请重新登录', 'warning');
                setTimeout(() => {
                    window.location.href = '/gm/login.html';
                }, 2000);
            }
        }
        
        function logout() {
            if (confirm('确定要退出登录吗？')) {
                // 清除会话信息
                sessionStorage.removeItem('gmToken');
                sessionStorage.removeItem('gmUsername');
                showMessage('已成功退出登录', 'info');
                // 跳转到登录页面
                setTimeout(() => {
                    window.location.href = '/gm/login.html';
                }, 1000);
            }
        }
        
        function showMessage(message, type) {
            // 简单的消息提示实现
            const msgElement = document.createElement('div');
            msgElement.className = `message ${type}`;
            msgElement.textContent = message;
            msgElement.style.position = 'fixed';
            msgElement.style.top = '50%';
            msgElement.style.left = '50%';
            msgElement.style.transform = 'translate(-50%, -50%)';
            msgElement.style.padding = '10px 20px';
            msgElement.style.backgroundColor = type === 'success' ? '#4CAF50' : type === 'warning' ? '#ff9800' : '#2196F3';
            msgElement.style.color = 'white';
            msgElement.style.borderRadius = '4px';
            msgElement.style.zIndex = '9999';
            msgElement.style.boxShadow = '0 2px 10px rgba(0,0,0,0.2)';
            document.body.appendChild(msgElement);
            
            setTimeout(() => {
                document.body.removeChild(msgElement);
            }, 2000);
        }
        
        function openPlayerManagement() {
            window.location.href = '/gm/player-management.html';
        }
        
        function openGameConfig() {
            showMessage('游戏配置功能即将开发', 'info');
        }
        
        function openStatistics() {
            showMessage('数据统计功能即将开发', 'info');
        }
        
        function openSystemLogs() {
            showMessage('系统日志功能即将开发', 'info');
        }
        
        // 防止用户通过浏览器后退按钮返回登录页面
        window.addEventListener('popstate', function(event) {
            if (!sessionStorage.getItem('gmToken')) {
                window.location.href = '/gm/login.html';
            }
        });
    </script>
</body>
</html>